<template>
  <el-container style="width: 100%">
    <el-aside style="width: auto">
      <div class="logo" v-show="!getAsideStatus">网上商城</div>
      <div class="logo" v-show="getAsideStatus">商城</div>
        <nav-menu></nav-menu>
    </el-aside>
    <el-container>
      <el-header>
        <hearder></hearder>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script>

import navMenu from "./common/navMenu";
import hearder from "./common/hearder";
import store from "@/store/index";
import loading from "./common/loading";
export default {
//import引入的组件需要注入到对象中才能使用
  components: {
    navMenu,
    hearder,
    loading
  },
  props: {},
  data() {
//这里存放数据
    return {};
  },
//计算属性 类似于data概念
  computed: {
    getAsideStatus(){

      return store.state.common.asideStatus
    }
  },
//监控data中的数据变化
  watch: {},
//方法集合
  methods: {},
//声明周期 - 创建完成（可以访问当前this实例）
  created() {

  },
//声明周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<!--scoped样式只对当前样式生效-->
<style lang="scss" scoped>
.el-header{
  //background-color: #57a9a9;
  color: #333;
  text-align: center;
  line-height: 60px;
  background-color: #3cff5b;
  background-image: linear-gradient(135deg, #3cff5b 0%, #784BA0 50%, #2B86C5 100%);
}

.el-aside {
  //background-color: #D3DCE6;
  color: #333;
  text-align: center;
  //line-height: 200px;
}

.el-main {
  background-color: #faf8f5;
  color: #333;
  text-align: center;
  line-height: 160px;
}
.el-container{
  height:100%;
  padding:0;
  margin:0;
  width:100%;
}
.el-aside>.logo{
  height: 60px;
  background-color: #54e8af;
  line-height: 60px;
  font-size: 19px;
  color: #eeeeee;
}







</style>
